import styles from "./SearchView.module.css";
import {useState} from "react";
import {Box, Button, ImageList, ImageListItem, InputBase, styled, useTheme} from "@mui/material";
import {ClearRounded, SearchSharp} from "@mui/icons-material";
import IconButton from "@mui/material/IconButton";
import DGTextView from "../../../components/DGTextView.tsx";
import {LauncherRouteSoftware, LauncherRouteSoftwareType} from "../../../LauncherRouteSoftware.tsx";
import DGCardView from "../../../components/DGCardView.tsx";
import DGListView from "../../../components/DGListView.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGFadeView from "../../../components/DGFadeView.tsx";
import DGFooterView from "../../../components/DGFooterView/DGFooterView.tsx";
// import DGGrowView from "../../../components/DGGrowView.tsx";

// 自定义输入（样式）
const DGInputBase = styled(InputBase)(({theme}) => {
    const mode = theme.palette.mode === "light";
    return {
        flex: 1, width: "100%", height: "100%",
        color: mode ? "black" : "#EDEDED",
        '& .MuiInputBase-input': {
            width: '100%', padding: `0 1em`,
            transition: theme.transitions.create('width'),
            [theme.breakpoints.up('md')]: {width: '20ch',},
        },
    }
});

const SearchView = () => {
    // 查询主题模式
    const m = useTheme().palette.mode === "light";
    // 搜索文字
    const [text, setText] = useState("");

    return (<DGFadeView time={1000} className={`${styles.SearchView} ${m ? styles.light : styles.dark}`}>

        {/* 搜索框 */}
        <Box className={styles.SearchBox}>
            {/* 搜索框 */}
            <DGInputBase
                placeholder="请输入搜索内容" value={text}
                onChange={e => setText(e.target.value)}/>
            {/* 清除内容按钮 */}
            {text.length > 0 && <IconButton className={styles.SearchButton} onClick={() => setText("")}>
                <ClearRounded/>
            </IconButton>}
            {/* 搜索按钮 */}
            <IconButton className={styles.SearchButton}><SearchSharp/></IconButton>
        </Box>

        <Box className={styles.Content}>

            {/* 搜索结果 */}
            <DGTextView Title Bold>
                您正在搜索：
                {text !== "" && <DGTextView component="span" color="error">{text}</DGTextView>}
                {text === "" && <DGTextView component="span">无</DGTextView>}
            </DGTextView>

            <ImageList variant="masonry" className={styles.ImageList}>
                {/* 分类栏目---遍历分类导航，使用MUI的 ImageListItem 类似瀑布流的布局 */}
                {text !== "" && LauncherRouteSoftwareType.map((v1, i1) => {
                    // 过滤
                    const filteredItems = LauncherRouteSoftware.filter(item =>
                        item['type'] === v1['id'] && item['name'].includes(text)
                    );
                    return (<ImageListItem key={i1}>
                        {/* 分类分组卡片 */}
                        <DGCardView animation time={i1 * 500} title={"【" + v1['title'] + "】搜索结果"} item small>
                            {/* 路由应用列表 */}
                            <DGListView>
                                {/* 遍历路由应用列表 */}
                                {filteredItems.length > 0 && filteredItems.map((item2, index) => (
                                    <DGListViewItem
                                        key={index} avatar={item2['icon']}
                                        title={item2['name']} subText={item2['desc']}>
                                        <Button>前往</Button>
                                    </DGListViewItem>
                                ))}
                                {/* 空数据 */}
                                {filteredItems.length <= 0 && <DGListViewItem title="无"/>}
                            </DGListView>
                        </DGCardView>
                    </ImageListItem>)
                })}
            </ImageList>
        </Box>
        {/* 底部信息 */}
        <DGFooterView/>
    </DGFadeView>);
}
export default SearchView;